import React, { Component } from 'react'
import { Menu, Button } from 'antd'
import '../../../../static/css/clientList.less'


function goView(e) {
    var url1 = '/article/view/' + e
    var win = window.open(url1, '_blank')
    win.focus()
}

function goEdit(e) {
    console.log(e)
    // var url1 = '/article/view/'+e
    // var win = window.open(url1,'_blank')
    // win.focus()
}
class SelfActivities extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: this.props.list
        }
    }
    delete(e) {
        console.log(e)
    }

    render() {
        var items = this.state.list
        return (
            <>
                {
                    items.map((items) =>
                        <li key={items.no} >
                            <div className='itemImage'>
                                <img src={items.image} alt='活动图片' />
                            </div>
                            <div className='itemInfo' >
                                <p className='itemTitle'>{items.title}</p>
                                <p className='itemType'>{items.author} | {items.type}</p>
                                <div className='itemInfo2'>
                                    <p className='double-line'>{items.info}</p>
                                </div>
                                <p className='itemDate'>{items.date}</p>
                            </div>
                            <div className='itemButton'>
                                <Button onClick={() => goView(items.no)}>预览</Button>
                                <Button onClick={() => this.delete(items.no)} danger>删除</Button>
                                <Button onClick={() => goEdit(items.no)}>编辑</Button>
                            </div>
                        </li>
                    )
                }
            </>
        )
    }
}

class CollectActivities extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: this.props.list
        }
    }
    render() {
        var items = this.state.list
        return (
            <>
                {
                    items.map((items) =>
                        <li key={items.no} onClick={() => goView(items.no)}>
                            <div className='itemImage'>
                                <img src={items.image} alt='活动图片' />
                            </div>
                            <div className='itemInfo' >
                                <p className='itemTitle'>{items.title}</p>
                                <p className='itemType'>{items.author} | {items.type}</p>
                                <div className='itemInfo2'>
                                    <p className='double-line'>{items.info}</p>
                                </div>
                                <p className='itemDate'>{items.date}</p>
                            </div>
                        </li>
                    )
                }
            </>
        )
    }

}

class ClientActivityList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selfList: [
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '121' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '122' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '123' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '124' },
            ],
            collectList: [
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '121' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '122' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '123' },
                { image: '#', type: '活动类型', title: '活动标题', author: '活动作者', info: '活动简介', date: '活动发布日期', no: '124' },
            ],
            articleType: 'self'
        }
    }
    handleClick = e => {
        console.log('click ', e);
        this.setState({ articleType: e.key });
    };
    render() {
        var type = this.state.articleType
        return (
            <div className='clientArticleList'>
                <Menu onClick={this.handleClick} selectedKeys={[this.state.articleType]} mode="horizontal">
                    <Menu.Item key="self" >
                        举办的活动
                    </Menu.Item>
                    <Menu.Item key="collect" >
                        参加的活动
                    </Menu.Item>
                </Menu>
                <ul>
                    {
                        // eslint-disable-next-line eqeqeq
                        type == 'self' ? (<SelfActivities list={this.state.selfList} />)
                            : (<CollectActivities list={this.state.collectList} />)
                    }
                </ul>
            </div>
        )
    }
}

export default ClientActivityList
